<template>
  <div class="trusttrialDetail">
    <div class="basic-data">
      <div class="title">
        基本资料
      </div>
      <div class="views">
        <div class="photo">
          <img
            :src="
              userPhoto === ''
                ? ''
                : userPhoto
            "
            style="object-fit: cover;width: 108px;"
          />
        </div>
        <div class="basic-data-view">
          <el-row>
            <el-col
              v-for="(item, index) in userDetail"
              :key="index"
              :span="8"
              class="views-col"
            >
              <span class="remark">{{ item.title }}</span>
              :
              <el-tooltip
                effect="dark"
                :content="String(item.value)"
                placement="top"
              >
                <span class="value">{{ item.value }}</span>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="loan-history">
      <div class="title">贷款历史</div>
      <el-table :data="loanData" style="width: 100%;padding: 24px;">
        <el-table-column
          prop="id"
          min-width="100"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="source"
          min-width="100"
          label="订单来源"
        ></el-table-column>
        <el-table-column
          prop="applyAmount"
          align="right"
          min-width="130"
          label="申请金额（元）"
        >
          <template slot-scope="scope">
            <span>{{ setMonry(Math.round(scope.row.applyAmount / 100)) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="auditResult"
          label="审核结果"
        ></el-table-column>
        <el-table-column min-width="100" prop="isLoan" label="是否放款">
          <template slot-scope="scope">
            <span>
              {{ scope.row.isLoan === 1 ? '是' : '否' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="isClear" label="是否结清">
          <template slot-scope="scope">
            <span>
              {{ scope.row.isClear === 1 ? '是' : '否' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="isOverdue"
          label="当前逾期"
        ></el-table-column>
        <el-table-column prop="overdueDays" min-width="100" label="逾期天数">
        </el-table-column>
        <el-table-column min-width="160" prop="applyAt" label="申请时间">
          <template slot-scope="scope">
            <span>
              {{ formatDate(new Date(scope.row.applyAt * 1000)) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="trusttrial-tab trusttrial-card"
      style="padding-top:12px;"
      v-loading="logLoading"
    >
      <el-row>
        <el-col :span="6">
          <div
            style="min-width: 230px;padding-right:16px;padding-top:12px;overflow:hidden"
          >
            <div v-if="dataNull" style="overflow:auto;height: 360px">
              <el-button
                v-if="this.fatherIndex > 0"
                @click="toFather()"
                type="text"
              >
                <i class="el-icon-d-arrow-left" />返回上级
              </el-button>
              <el-timeline style="padding-left:0px;">
                <el-timeline-item
                  v-for="(activity, index) in logsData"
                  :key="index"
                  :timestamp="activity.timestamp"
                  style="overflow:hidden;padding: 5px"
                >
                  <template v-if="!activity.childrens">
                    <el-link
                      :underline="false"
                      :class="{
                        'link-active': isActivity && isIndex === index
                      }"
                      @click="logsChange(activity, index)"
                    >
                      <el-tooltip
                        effect="dark"
                        :content="String(activity.node_name)"
                        placement="top"
                      >
                        <span>{{ activity.node_name }}</span>
                      </el-tooltip>
                    </el-link>
                  </template>
                  <template v-if="activity.childrens">
                    <el-link
                      :underline="false"
                      :class="{
                        'link-active': isActivity && isIndex === index
                      }"
                      @click="logsChange(activity, index)"
                    >
                      {{ activity.node_name }}
                    </el-link>
                    <el-button
                      @click="lookson(logsData, activity.childrens, index)"
                      type="text"
                      style="margin-left: 12px"
                    >
                      查看子流程<i class="el-icon-d-arrow-right" />
                    </el-button>
                  </template>
                </el-timeline-item>
              </el-timeline>
            </div>
            <div
              v-if="!dataNull"
              style="height: 100%;text-align: center;padding-top: 74px;color: #909399;"
            >
              暂无数据
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="规则记录" name="first">
                <el-table :data="ruleList" border max-height="300">
                  <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                      <span slot="reference" class="table-tb">
                        {{ scope.$index }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    min-width="100px"
                    prop="rule_name"
                    label="规则名称"
                  >
                    <template slot-scope="scope">
                      <el-popover
                        placement="left-start"
                        width="200"
                        trigger="hover"
                        :content="scope.row.rule_name"
                      >
                        <span slot="reference" class="table-tb">
                          {{ scope.row.rule_name }}
                        </span>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column width="90px" align="center" label="是否命中">
                    <template slot-scope="scope">
                      <!-- {{ scope.row.rule_result === '1' ? '是' : '否' }} -->
                      <el-tag
                        v-if="scope.row.rule_result === '1'"
                        size="mini"
                        type="success"
                      >
                        命中
                      </el-tag>
                      <el-tag v-else size="mini" type="info">
                        未命中
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    min-width="70px"
                    prop="execute_sort"
                    label="条件序号"
                  ></el-table-column>
                  <el-table-column prop="left_variable" label="左变量">
                    <template slot-scope="scope">
                      <el-popover
                        placement="left-start"
                        min-width="200"
                        trigger="hover"
                        :content="scope.row.left_variable"
                      >
                        <span slot="reference" class="table-tb">
                          {{ scope.row.left_variable }}
                        </span>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="left_variable_value"
                    label="左变量值"
                    min-width="70px"
                  ></el-table-column>
                  <el-table-column
                    prop="comparison_operater"
                    label="比较符"
                    min-width="70px"
                  ></el-table-column>
                  <el-table-column label="右变量">
                    <template slot-scope="scope">
                      <el-popover
                        placement="left-start"
                        width="200"
                        trigger="hover"
                        :content="scope.row.right_variable"
                      >
                        <span slot="reference" class="table-tb">
                          {{ scope.row.right_variable }}
                        </span>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column prop="right_variable_value" label="右变量值">
                    <template slot-scope="scope">
                      <el-popover
                        placement="left-start"
                        width="200"
                        trigger="hover"
                        :content="scope.row.right_variable_value"
                      >
                        <span slot="reference" class="table-tb">
                          {{ scope.row.right_variable_value }}
                        </span>
                      </el-popover>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="节点记录" name="second">
                <el-table :data="inputVariables" border max-height="200">
                  <el-table-column label="输入变量">
                    <el-table-column
                      prop="variable_show_name"
                      label="变量名称"
                    ></el-table-column>
                    <el-table-column
                      prop="variable_name"
                      label="英文名"
                    ></el-table-column>
                    <el-table-column label="类型" width="120px">
                      <template slot-scope="scope">
                        <el-popover
                          placement="left-start"
                          width="200"
                          trigger="hover"
                          :content="scope.row.value_type"
                        >
                          <span slot="reference" class="table-tb">
                            {{ scope.row.value_type }}
                          </span>
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column prop="value" label="变量值">
                      <template slot-scope="scope">
                        <el-popover
                          placement="left-start"
                          width="200"
                          trigger="hover"
                          :content="scope.row.value"
                        >
                          <span slot="reference" class="table-tb">
                            {{ scope.row.value }}
                          </span>
                        </el-popover>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table>
                <el-table :data="tempVariables" border max-height="200">
                  <el-table-column label="临时变量">
                    <el-table-column
                      prop="variable_show_name"
                      label="变量名称"
                    ></el-table-column>
                    <el-table-column
                      prop="variable_name"
                      label="英文名"
                    ></el-table-column>
                    <el-table-column
                      prop="value_type"
                      width="120px"
                      label="类型"
                    ></el-table-column>
                    <el-table-column prop="value" label="变量值">
                      <template slot-scope="scope">
                        <el-popover
                          placement="left-start"
                          width="200"
                          trigger="hover"
                          :content="scope.row.value"
                        >
                          <span slot="reference" class="table-tb">
                            {{ scope.row.value }}
                          </span>
                        </el-popover>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table>
                <el-table :data="outputVariables" border max-height="200">
                  <el-table-column label="输出变量">
                    <el-table-column
                      prop="variable_show_name"
                      label="变量名称"
                    ></el-table-column>
                    <el-table-column
                      prop="variable_name"
                      label="英文名"
                    ></el-table-column>
                    <el-table-column
                      prop="value_type"
                      label="类型"
                      width="120px"
                    ></el-table-column>
                    <el-table-column prop="value" label="变量值">
                      <template slot-scope="scope">
                        <el-popover
                          placement="left-start"
                          width="200"
                          trigger="hover"
                          :content="scope.row.value"
                        >
                          <span slot="reference" class="table-tb">
                            {{ scope.row.value }}
                          </span>
                        </el-popover>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="detailed trusttrial-card">
      <div class="title">详细信息</div>
      <div
        v-for="(item, index) in detailedData"
        :key="index"
        style="padding: 12px 24px 12px 24px;"
        class="detailed-data"
      >
        <div style="margin-bottom: 12px;">{{ item.title }}</div>
        <el-row>
          <el-col
            v-for="(itemviews, index) in item.views"
            :key="index"
            :span="8"
            class="views-col"
          >
            <span class="remark">{{ itemviews.title }}</span>
            :
            <el-tooltip
              effect="dark"
              :content="String(itemviews.value)"
              placement="top"
            >
              <span class="value">{{ itemviews.value }}</span>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-row :gutter="20" class="trusttrial-footer">
      <el-col :span="12">
        <div class="anti-fraud">
          <div class="title">反欺诈检测</div>
          <div style="padding: 0 0 24px;">
            <div style="overflow:auto;height: 236px;">
              <!-- <span v-if="antifraudData.length < 1">进件处理中</span> -->
              <!-- <div
                style="margin-bottom: 8px"
                v-for="(item, index) in antifraudData"
                :key="index"
              >
                <span class="remark" style="color: rgba(0, 0, 0, 0.65);">
                  {{ item.name === null ? item.code : item.name }}
                </span>
                :
                <span class="value" style="margin-left: 8px;">
                  {{ item.result === 0 ? ' 未命中' : ' 命中' }}
                </span>
              </div> -->
              <el-table :show-header="false" border :data="antifraudData">
                <el-table-column prop="name"></el-table-column>
                <el-table-column prop="result">
                  <template slot-scope="scope">
                    {{ scope.row.result === 0 ? '未命中' : '命中' }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="risk-assessment">
          <div class="title">风控评分</div>
          <div id="riskassessment" ref="riskassessment"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 预留 -->
    <div class="trusttrial-tab trusttrial-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="身份识别" name="first">
          <el-tabs tab-position="left">
            <el-tab-pane class="child-pane" label="证件图片">
              <el-row>
                <el-col
                  :span="8"
                  v-for="(item, index) in idCardData"
                  :key="index"
                  class="detailed-data"
                  style="display:flex"
                >
                  <div class="demonstration">{{ item.name }}:</div>
                  <div v-if="item.url !== ''" class="demo-image__preview">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="item.url"
                      :preview-src-list="[item.url]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                  <span v-else>暂无无数据</span>
                </el-col>
                <!-- <el-col :span="8" class="detailed-data" style="display:flex">
                  <div class="demonstration">身份证正面照：</div>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="require('./img/bm.jpg')"
                      :preview-src-list="[require('./img/bm.jpg')]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                </el-col>
                <el-col :span="8" class="detailed-data" style="display:flex">
                  <div class="demonstration">身份证反面：</div>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="require('./img/zm.jpg')"
                      :preview-src-list="[require('./img/zm.jpg')]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                </el-col>
                <el-col :span="8" class="detailed-data" style="display:flex">
                  <div class="demonstration">人像面切边照片：</div>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="require('./img/bm.jpg')"
                      :preview-src-list="[require('./img/bm.jpg')]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                </el-col>
                <el-col :span="8" class="detailed-data" style="display:flex">
                  <div class="demonstration">身份证国徽照：</div>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="require('./img/qbz.jpg')"
                      :preview-src-list="[require('./img/qbz.jpg')]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                </el-col>
                <el-col :span="8" class="detailed-data" style="display:flex">
                  <div class="demonstration">国徽面切边照片：</div>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="require('./img/qbb.jpg')"
                      :preview-src-list="[require('./img/qbb.jpg')]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                </el-col>
                <el-col :span="8" class="detailed-data" style="display:flex">
                  <div class="demonstration">身份证头像照片：</div>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="require('./img/tx.jpg')"
                      :preview-src-list="[require('./img/tx.jpg')]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                </el-col> -->
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="设备信息" name="second">
          <el-tabs tab-position="left">
            <el-tab-pane class="child-pane" label="设备信息">
              <el-table :data="telData" border style="width: 100%;">
                <el-table-column
                  prop="deviceInfo"
                  label="设备信息"
                ></el-table-column>
                <el-table-column prop="mobile" label="手机号"></el-table-column>
                <el-table-column label="操作">
                  <el-button type="text" size="mini" @click="getApp()">
                    设备应用
                  </el-button>
                  <el-button type="text" size="mini" @click="getPhone()">
                    联系人
                  </el-button>
                  <el-button type="text" size="mini" @click="locationChange()">
                    设备定位
                  </el-button>
                </el-table-column>
              </el-table>
              <el-dialog
                title="设备应用"
                :close-on-click-modal="false"
                :modal-append-to-body="false"
                :visible.sync="formVisible"
              >
                <el-table :data="telApp" border style="width: 100%;">
                  <el-table-column prop="id" label="序号"></el-table-column>
                  <el-table-column
                    prop="name"
                    label="应用名称"
                  ></el-table-column>
                  <el-table-column prop="uploadAt" label="上报时间">
                    <template slot-scope="scope">
                      <span>
                        {{ formatDate(new Date(scope.row.uploadAt * 1000)) }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-dialog>
              <el-dialog
                title="联系人"
                :close-on-click-modal="false"
                :modal-append-to-body="false"
                :visible.sync="phoneViews"
              >
                <el-table :data="phoneData" border style="width: 100%;">
                  <el-table-column
                    prop="name"
                    label="联系人姓名"
                  ></el-table-column>
                  <el-table-column
                    prop="mobile"
                    label="联系人电话"
                  ></el-table-column>
                </el-table>
              </el-dialog>
              <el-dialog
                title="设备定位"
                :close-on-click-modal="false"
                :modal-append-to-body="false"
                :visible.sync="location"
              >
                <el-table :data="locationData" border style="width: 100%;">
                  <el-table-column
                    prop="location"
                    label="经纬度"
                  ></el-table-column>
                  <el-table-column
                    prop="uploadAt"
                    label="上报时间"
                  ></el-table-column>
                </el-table>
              </el-dialog>
            </el-tab-pane>
          </el-tabs>
          <!-- <div class="title">贷款历史</div> -->
        </el-tab-pane>
        <el-tab-pane label="活体" name="third">
          <el-tabs tab-position="left">
            <el-tab-pane class="child-pane" label="活体">
              <el-row class="content-row">
                <!-- <el-col :span="6" style="display: flex">
                  <div class="demonstration">活体识别图片:</div>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="faceids.photo"
                      :preview-src-list="[faceids.photo]"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                </el-col> -->
                <el-col :span="24" style="display: flex">
                  活体识别视频 :
                  <template v-if="faceids.video === undefined">
                    暂无视频
                  </template>
                  <template v-else>
                    <video-player
                      class="video-player-box"
                      ref="videoPlayer"
                      :options="playerOptions"
                      :playsinline="true"
                      width="250px"
                      height-="250px"
                      customEventName="活体识别视频"
                      @play="onPlayerPlay($event)"
                      @pause="onPlayerPause($event)"
                    >
                    </video-player>
                  </template>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import {
  getdetailData,
  getuserData,
  getloanData,
  getuesrdetailData,
  getcheckedData,
  idCard,
  bodyInfo,
  equipmentInfo,
  deviceContacts,
  deviceApps,
  deviceLocation
} from '@/api/risksystem/trustTrial/index'
import { getLogs } from '@/api/risksystem/trustTrial/log'
// import comprehensive from './comprehensive'
import riskassessment from './riskassessment'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

@Component({
  name: 'trusttrialDetail',
  components: {
    //引用的组件在这里声明
    videoPlayer
  }
})
export default class extends Vue {
  get playerOptions() {
    return {
      // videojs options
      height: '250',
      muted: true,
      language: 'zh-CN',
      controls: true,
      sources: [
        {
          type: 'video/mp4',
          src: this.faceids.video
        }
      ]
    }
  }
  // 基本资料
  private userDetail: any = []
  private userPhoto = ''
  // 贷款历史
  private loanData: any = []
  // 结构日志
  private isActivity = false
  private logLoading = true
  private dataNull = false
  private isIndex: any = ''
  private oldIndex: any = ''
  private logsData: any = []
  private ruleList: any = []
  private inputVariables: any = []
  private tempVariables: any = []
  private outputVariables: any = []
  private fatherData: any = []
  private fatherIndex = 0
  private radio: any = ''
  // 反欺诈规则
  private antifraudData: any = []
  // 身份识别
  private idCardData: any = []
  // 设备信息
  private telData: any = []
  // 应用信息
  private formVisible = false
  private telApp: any = []
  // 设备通讯录
  private phoneData: any = []
  private phoneViews = false
  // 设备定位
  private locationData: any = []
  private location = false
  // 活体
  private faceids: any = {}
  // 详细信息
  private detailedData: any = [
    {
      title: '个人信息',
      views: []
    },
    {
      title: '联系人信息',
      views: []
    },
    {
      title: '工作信息',
      views: []
    },
    {
      title: '其他信息',
      views: []
    }
  ]
  private activeName = 'first'
  get applyRiskId() {
    //computed 属性
    return this.$route.query['applyRiskId']
  }
  created() {
    // 最早可以调用vue组件method的钩子
    this.getuserDetail()
    this.getloanDetail()
    this.getuesrdetailData()
    this.getcheckedData()
    this.idCard()
    this.equipmentInfo()
    this.bodyInfo()
  }
  mounted() {
    //mounted 钩子
    this.getDetail()
    this.clickSetOption()
    this.getLogs()
  }
  // 数据请求

  //风控评分
  private async getDetail() {
    const { data } = await getdetailData({ applyRiskId: this.applyRiskId })
    let chart = new riskassessment('riskassessment')
    chart.setOption(data.score)
  }
  // 用户基本资料
  private async getuserDetail() {
    const { data } = await getuserData({ applyRiskId: this.applyRiskId })
    this.userPhoto = data.avatar
    this.userDetail = [
      {
        title: '姓名',
        value: data.nameEncrypt ? data.nameEncrypt : '暂无数据'
      },
      {
        title: '性别',
        value: data.gender ? data.gender : '暂无数据'
      },
      {
        title: '年龄',
        value: data.age ? data.age : '暂无数据'
      },
      {
        title: '民族',
        value: data.nationality ? data.nationality : '暂无数据'
      },
      {
        title: '籍贯',
        value: data.native ? data.native : '暂无数据'
      },
      {
        title: '身份证号',
        value: data.idCardNoEncrypt ? data.idCardNoEncrypt : '暂无数据'
      },
      {
        title: '注册时间',
        value: data.regTime
          ? data.regTime + '（' + data.regDays + '天）'
          : '暂无数据'
      },
      {
        title: '进件渠道',
        value: data.applySource ? data.applySource : '暂无数据'
      },
      {
        title: '客群',
        value: data.userType ? data.userType : '暂无数据'
      }
    ]
  }
  // 贷款历史
  private async getloanDetail() {
    const { data } = await getloanData({ applyRiskId: this.applyRiskId })
    this.loanData = data.list
  }
  // 结构化日志
  private async getLogs() {
    // const { data } = await getLogs({ apply_risk_id: this.applyRiskId })
    try {
      const resGetLogs: any = await getLogs({ apply_risk_id: this.applyRiskId })
      if (resGetLogs.data.length === 0) {
        this.dataNull = false
      } else {
        this.dataNull = true
        this.radio = 0
        this.logsData = resGetLogs.data
        this.ruleList = resGetLogs.data[0].rule_list
        this.inputVariables = resGetLogs.data[0].input_variables
        this.outputVariables = resGetLogs.data[0].output_variables
        this.tempVariables = resGetLogs.data[0].temp_variables
        this.isActivity = true
        this.isIndex = 0
      }
    } catch (error) {
      console.log(error)
    } finally {
      //
      this.logLoading = false
    }
    // const resGetLogs: any = await getLogs({ apply_risk_id: this.applyRiskId })
    // this.logLoading = false
    // if (resGetLogs.code === 0) {
    //   if (resGetLogs.data.length === 0) {
    //     this.dataNull = false
    //   } else {
    //     this.dataNull = true
    //     this.radio = 0
    //     this.logsData = resGetLogs.data
    //     this.ruleList = resGetLogs.data[0].rule_list
    //     this.inputVariables = resGetLogs.data[0].input_variables
    //     this.outputVariables = resGetLogs.data[0].output_variables
    //     this.tempVariables = resGetLogs.data[0].temp_variables
    //     this.isActivity = true
    //     this.isIndex = 0
    //   }
    // } else {
    //   this.dataNull = false
    // }
  }
  private lookson(oldData: any, data: any, index: any) {
    this.oldIndex = index
    this.isIndex = ''
    this.isActivity = false
    this.logsData = data
    this.fatherData.push(oldData)
    this.fatherIndex++
  }
  private toFather() {
    this.isIndex = this.oldIndex
    this.isActivity = true
    this.logsData = this.fatherData[this.fatherData.length - 1]
    this.fatherData.splice(-1)
    this.fatherIndex--
  }
  private logsChange(data: any, index: any) {
    this.isActivity = true
    this.isIndex = index
    this.ruleList = data.rule_list
    this.inputVariables = data.input_variables
    this.outputVariables = data.output_variables
    this.tempVariables = data.temp_variables
  }
  // 用户详细信息
  private async getuesrdetailData() {
    const { data } = await getuesrdetailData({ applyRiskId: this.applyRiskId })
    // 个人信息
    this.detailedData[0].views = [
      {
        title: '婚姻状态',
        value: data.marriage ? data.marriage : '暂无数据'
      },
      {
        title: '现居城市',
        value: data.homeAddrProvinceCity
          ? data.homeAddrProvinceCity
          : '暂无数据'
      },
      {
        title: '详细地址',
        value: data.homeAddrDistrictDetail
          ? data.homeAddrDistrictDetail
          : '暂无数据'
      },
      {
        title: '户籍地址',
        value: data.ocrAddress ? data.ocrAddress : '暂无数据'
      },
      {
        title: '最后一次LBS',
        value: data.lbsAddress ? data.lbsAddress : '暂无数据'
      },
      {
        title: '最后一次IP',
        value: data.ipAddress ? data.ipAddress : '暂无数据'
      }
    ]
    // 联系人信息
    this.detailedData[1].views = [
      {
        title: '姓名',
        value: data.contacts[0].name ? data.contacts[0].name : '暂无数据'
      },
      {
        title: '联系电话',
        value: data.contacts[0].phone ? data.contacts[0].phone : '暂无数据'
      },
      {
        title: '与借款人关系',
        value: data.contacts[0].relation
          ? data.contacts[0].relation
          : '暂无数据'
      },
      {
        title: '姓名',
        value: data.contacts[1].name ? data.contacts[1].name : '暂无数据'
      },
      {
        title: '联系电话',
        value: data.contacts[1].phone ? data.contacts[1].phone : '暂无数据'
      },
      {
        title: '与借款人关系',
        value: data.contacts[1].relation
          ? data.contacts[1].relation
          : '暂无数据'
      }
    ]

    // 工作信息
    this.detailedData[2].views = [
      {
        title: '用户职业',
        value: data.jobOccupation ? data.jobOccupation : '暂无数据'
      },
      {
        title: '工作单位',
        value: data.companyName ? data.companyName : '暂无数据'
      },
      {
        title: '单位电话',
        value: data.companyPhone ? data.companyPhone : '暂无数据'
      },
      {
        title: '所在城市',
        value: data.companyAddrProvinceCity
          ? data.companyAddrProvinceCity
          : '暂无数据'
      },
      {
        title: '详细地址',
        value: data.companyAddrDistrictDetail
          ? data.companyAddrDistrictDetail
          : '暂无数据'
      }
    ]
    // 其他情况
    this.detailedData[3].views = [
      {
        title: '收入情况',
        value: data.monthIncome ? data.monthIncome : '暂无数据'
      },
      {
        title: '借款用途',
        value: data.loanPurpose ? data.loanPurpose : '暂无数据'
      },
      {
        title: '还款来源',
        value: data.paymentSource ? data.paymentSource : '暂无数据'
      }
    ]
  }
  // 规则检测
  private async getcheckedData() {
    const { data } = await getcheckedData({ applyRiskId: this.applyRiskId })
    this.antifraudData = data.list
  }
  // 身份识别
  private async idCard() {
    const { data } = await idCard({ applyRiskId: this.applyRiskId })
    this.idCardData = [
      {
        name: '身份证正面照',
        url: data.frontPhoto
      },
      {
        name: '身份证正面切边照',
        url: data.frontCrop
      },
      {
        name: '身份证背面照',
        url: data.backPhoto
      },
      {
        name: '身份证背面切边照',
        url: data.backCrop
      },
      {
        name: '身份证头像照',
        url: data.headPhoto
      }
    ]
    // this.idCardData = [
    //   {
    //     type: 'bank_idcard_front',
    //     name: '身份证正面照',
    //     hash: '153d34e3b6d6fbe8b8ef401d2d149ed9',
    //     url: './img/zm.jpg'
    //   },
    //   {
    //     type: 'bank_idcard_back',
    //     name: '身份证反面',
    //     hash: '9170c30877585fb7c07be2a6d10497ca',
    //     url: './img/bm.jpg',
    //     create_at: '2019-12-19 17:02:22'
    //   },
    //   {
    //     type: 'bank_idcard_front_crop',
    //     name: '人像面切边照片',
    //     hash:
    //       'http://172.16.0.14:8019/download/zz34vcy8cdzp12mhuk4lfoo5bela39v1oam2oajv.jpeg',
    //     url: './img/qbz.jpg',
    //     create_at: '2019-12-19 17:02:22'
    //   },
    //   {
    //     type: 'bank_idcard_back_crop',
    //     name: '国徽面切边照片',
    //     hash: '87412c57151d214e729c3d0f47f28c0c',
    //     url: './img/qbb.jpg',
    //     create_at: '2019-12-19 17:02:22'
    //   },
    //   {
    //     type: 'bank_idcard_head_photo',
    //     name: '身份证头像照片',
    //     hash: '50ae8ddc5db2be4ae485d38235870e13',
    //     url: './img/tx.jpg',
    //     create_at: '2019-12-19 17:02:22'
    //   }
    // ]
  }
  // 设备信息
  private async equipmentInfo() {
    const { data } = await equipmentInfo({ applyRiskId: this.applyRiskId })
    // var data = { deviceInfo: 'fakeDevice', mobile: '13800138000' }
    this.telData = [
      {
        deviceInfo: data.deviceInfo,
        mobile: data.mobile
      }
    ]
  }
  // 设备应用
  private async deviceApps() {
    const { data } = await deviceApps({ applyRiskId: this.applyRiskId })
    this.telApp = data.list
  }
  // 设备通讯录
  private async deviceContacts() {
    const { data } = await deviceContacts({ applyRiskId: this.applyRiskId })
    this.phoneData = data.list
  }
  // 设备定位
  private async deviceLocation() {
    const { data } = await deviceLocation({ applyRiskId: this.applyRiskId })
    this.locationData = data.list
  }
  // 活体
  private async bodyInfo() {
    const { data } = await bodyInfo({ applyRiskId: this.applyRiskId })
    this.faceids.video = data.url
    // this.faceids.video = 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4'
  }
  private getApp() {
    this.formVisible = true
    this.deviceApps()
  }
  private getPhone() {
    this.phoneViews = true
    this.deviceContacts()
  }
  private locationChange() {
    this.location = true
    this.deviceLocation()
  }
  private clickSetOption() {
    // if (this.$refs.comprehensive) {
    //   let chart = new comprehensive('comprehensive')
    //   chart.setOption({})
    // }
    // if (this.$refs.riskassessment) {
    //   let chart = new riskassessment('riskassessment')
    //   chart.setOption({})
    // }
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return (
      year +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (date < 10 ? '0' + date : date) +
      ' ' +
      (hour < 10 ? '0' + hour : hour) +
      ':' +
      (minute < 10 ? '0' + minute : minute) +
      ':' +
      (second < 10 ? '0' + second : second)
    )
  }
  private setMonry(data: any) {
    var reg = /\d{1,3}(?=(\d{3})+$)/g
    return (data + '').replace(reg, '$&,')
    // return data.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') //使用正则替换，每隔三个数加一个','
  }
}
</script>
<style lang="scss" scoped>
.trusttrialDetail {
  padding: 24px;
  height: auto !important;
  background: #d4d3d373;
  .basic-data {
    margin-bottom: 24px;
    border-radius: 2px;
    background-color: #ffffff;
    .views {
      display: flex;
      padding: 24px;
      .photo {
        width: 108px;
        height: 108px;
        border-radius: 50%;
        background-color: rgb(166, 219, 255);
      }
      .basic-data-view {
        flex: 1;
        font-size: 14px;
        padding: 8px;
      }
    }
  }
  .loan-history {
    margin-bottom: 24px;
    border-radius: 2px;
    background-color: #ffffff;
  }
  .detailed {
    margin-bottom: 24px;
    border-radius: 2px;
    background-color: #ffffff;
  }
  .trusttrial-footer {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    .anti-fraud,
    .comprehensive-assessment,
    .risk-assessment {
      border-radius: 2px;
      background-color: #ffffff;
    }
  }
  .trusttrial-tab {
    padding: 0 24px 24px 24px;
    font-size: 14px;
  }
  .trusttrial-card {
    border-radius: 2px;
    margin-bottom: 24px;
    background-color: #ffffff;
  }
}
#riskassessment,
#comprehensive {
  width: 100%;
  height: 260px;
}
.title {
  padding: 24px;
  border-bottom: 1px solid #e9e9e9;
}
.detailed-data {
  font-size: 14px;
}
.views-col {
  padding: 8px 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  .remark {
    color: rgba(0, 0, 0, 0.85);
  }
  .value {
    color: rgba(0, 0, 0, 0.65);
  }
}
li {
  list-style-type: none;
}
.demonstration {
  margin-right: 12px;
}
.child-pane {
  padding-top: 12px;
}
.el-timeline {
  margin: 6px !important;
}
// .el-table__row {
//   td {
//     .cell {
//       width: 100%;
//       span {
//         width: 100%;
//       }
//     }
//   }
// }
.table-tb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-active {
  color: #1890ff;
}
</style>
<style lang="scss">
.anti-fraud {
  .el-table__body td {
    height: 36px !important;
  }
}
</style>
